// 布局测试
<template>

<div class="box"  :class='layoutType'>
    
    <div class="block owner">
        <h1 class="header">车主信息</h1>
        
        <div class="content">
            <Form   label-position='right' :label-width='60'>
            <Row :gutter='16'>
                <Col :span='item.span' v-for='item of owner' :key='item.label'>
                    <FormItem   :key='item' :label='item.label'>
                        <Input :size='item.size' :placeholder='item.label'></Input>
                        
                    </FormItem>
                </Col>
            </Row>
            </Form>
        </div>
        <Button type='primary' @click='change'>
            change
        </Button>
    </div>
    
    <div class="block car">
        <h1 class="header">车辆信息</h1>
    </div>
    
    <div class="block tex">
        <h1 class="header">税务信息</h1>
        
    </div>
    
</div>

</template>

<script lang='ts'>
import {Component, Vue} from 'vue-property-decorator'

interface layout{
    [propername:string]: boolean
}


@Component
export default class form extends Vue{
    name:string = 'form'
    
    layoutType:layout = {
        default: false,
        lay_1: true,
    }

   
    
    owner_1 = [

        {
            label: '人员姓名',
            span: 4,
            size: 'md',
        },
        {
            label: '证件类型',
            span: 4,
            size: 'md',
        },
        {
            label: '手机号码',
            span: 4,
            size: 'md',
        },
        {
            label: '联系地址',
            span: 4,
            size: 'md',
        },
        {
            label: '人员性质',
            span: 4,
            size: 'md',
        }
        
    ]


    owner_2 = [

        {
            label: '人员姓名',
            span: 24,
           size: 'small',
        },
        {
            label: '证件类型',
            span: 24,
           size: 'small',
        },
        {
            label: '手机号码',
            span: 24,
           size: 'small',
        },
        {
            label: '联系地址',
            span: 24,
            size: 'small',
        },
        {
            label: '人员性质',
            span: 24,
            size: 'small',
        }
        
    ]

    owner:any

    
    
    change (){
        this.layoutType.default = this.layoutType.lay_1;
        this.layoutType.lay_1 = !this.layoutType.lay_1;
        
        this.owner = this.layoutType.lay_1 ? this.owner_2 : this.owner_1;
        
        console.log(this.layoutType)
        
    }
    
    created (){
        this.owner = this.owner_2;
    }
}
  

</script>

<style scoped lang='scss'>


.box{
    display:  grid;

    // $layout: repeat(10 1fr);
    // grid-template-columns: $layout;
    // grid-template-rows: $layout;

    $interval: _rem(16px);
    grid-column-gap: $interval;
    grid-row-gap: $interval;
    // grid-template-areas: 'owner car tex' '. . . ' '. . .';
     grid-auto-columns: 1fr;
     grid-auto-rows: 1fr;
    
    background: $default_bg;

}

.block{
    box-sizing: border-box;
    padding: _rem(20px);
    background: $block_bg_color;
    
    .header{
        padding: _rem(12px) 0;
        border-bottom: _rem(.5px) solid $secondary_color;
        
        font-size: 1rem;
        font-weight: 400;
    }    

    .content{
        padding: _rem(10px) 0;
    }
        
}

$size: _rem(100px);
.owner,
.car,
.tex{
    min-width: $size;
    min-height: $size;
    
}

.default{
    
    .owner{
        grid-column: 1/4;
        grid-row: 1/1;
        
    }
    .car{
        grid-column: 1/4;
        grid-row: 2/2;
    }
    .tex{
        grid-column: 1/4;
        grid-row: 3/3;
    }

}

.lay_1{

    .owner{
        grid-column: 1/3;
        grid-row: 1/4;
        
    }

    .car{
        grid-column: 3/12;
        grid-row: 1/1;
    }

    .tex{
        grid-column: 3/6;
        grid-row: 2/3;
    }
    
    
}


</style>